<ion-header>
  <ion-navbar color="danger">
    <ion-title>
      待办事项
    </ion-title>
    <ion-buttons end>
     <button ion-button icon-left (click)="addTask()">
       <ion-icon name="add-circle"></ion-icon>  新增
     </button>
    </ion-buttons>
  </ion-navbar>
  
  
</ion-header>

<ion-content padding>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content 
      pullingIcon="arrow-dropdown"
      pullingText="下拉刷新"
      refreshingSpinner="circles"
      refreshingText="下拉刷新...">
    </ion-refresher-content>
  </ion-refresher>
  <ion-list>
    <ion-item-sliding #slidingItem *ngFor="let task of tasks">
        <ion-item [ngClass]="{'task_done': task.status === 'done'}" (click)="editTask(task)">{{task.title}}</ion-item>
        <ion-item-options side="right" (ionSwipe)="removeTask(slidingItem,task)">
          <button ion-button icon-only colro="secondary" (click)="markAsDone(slidingItem,task)">
            <ion-icon name="checkmark"></ion-icon>
          </button>
          <button ion-button icon-only expandable color="danger" (click)="removeTask(slidingItem,task)">
            <ion-icon name="trash"></ion-icon>
          </button>
        </ion-item-options>
    </ion-item-sliding> 
  </ion-list>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
</ion-content>
